<template>
  <div>
  <ab-step :bar-active-color="activeColor">
    <template v-for="(item,index) in dataList">
      <div v-if="index > 0" style="display: flex;align-items: center;">
        <x-icon :style="{fill: currentIndex >= index ? activeColor : ''}" type="ios-arrow-right" size="18" ></x-icon>
      </div>
      <ab-step-item :disabled="!clickSwitch"  @on-item-click="handler" :selected="index == currentIndex" :style="{color: currentIndex >= index ? activeColor : ''}">{{item[keyName]}}</ab-step-item>
    </template>
  </ab-step>
  </div>
</template>

<script>
  // 引入修改过的Vux-tab组件
  import abStep from './tab'
  import abStepItem from './tab-item'

  export default {
    components: {
      abStep,
      abStepItem
    },
    props: {
      // 节点列表数据
      dataList: {
        type: Array,
        default: () => []
      },
      // 当前选中节点
      currentIndex: {
        type: Number,
        default: 0
      },
      // 节点点亮时的颜色
      activeColor: {
        type: String,
        default: '#04BE02'
      },
      // 点击是否可以切换
      clickSwitch: {
        type: Boolean,
        default: true
      },
      // 节点名称取值的键名
      keyName: {
        type: String,
        default: 'title'
      }
    },
    model: {
      prop: "currentIndex",
      event: "changeCurrent"
    },
    methods: {
      handler(index) {
        this.$emit("changeCurrent",index)
      },

    }
  }
</script>

<style scoped>
  .hoverClass{
    fill: #04BE02;
  }
</style>
